<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/common.js"></script>
    <script src="/js/thumbsUp.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/strategyCatalogs.css">
    <link rel="stylesheet" type="text/css" href="/css/A-emoji.css">
    <script src="/js/plugins/A-emoji.js" type="text/javascript" charset="utf-8"></script>
    <script>
        function successAlert(data) {
            if (data.success) {
                $(document).dialog({
                    type: 'alert',
                    closeBtnShow: false,
                    content: '评论成功',
                })
                setTimeout(function () {
                    location.reload();
                }, 500);
            }
        }

        function login() {
            $(document).dialog({
                type: 'confirm',
                closeBtnShow: false,
                content: '先登录下吧,亲',
                onClickConfirmBtn: function () {
                    location.href = "/login.html"
                }
            })
        }

        $(function () {

            var params = getParams();
            var user = JSON.parse(sessionStorage.getItem("user"));
            $.get('/strategyComments/' + params.id, function (data) {
                $('.comment').renderValues(data, {
                    getUserId: function (item, value) {
                        $(item).attr('href', $(item).data('href') + value)
                    }, getStrategyId: function (item, value) {
                        $(item).attr('href', $(item).data('href') + value)
                    }, getStar: function (item, value) {
                        var starHtml = "";
                        for (i = 0; i < value; i++) {
                            starHtml += '<i class="fa fa-star"></i>'
                        }
                        for (i = 0; i < 5 - value; i++) {
                            starHtml += '<i class="fa fa-star-o"></i>'
                        }
                        $(item).html(starHtml)
                    }
                })


                // 获取点赞个数

                function getZenNum() {
                    $.get("/Zans/count", {type: 4, typeId: params.id}, function (data) {
                        $('#likeBtn').html(data);
                    })
                }

                getZenNum();

                //获取点赞的样式颜色
                function getZanColor() {
                    $.get('/Zans/zan', {type: 4, typeId: params.id, userId: user.id}, function (data) {
                        if (data.success) {
                            $("#likeBtn").css("color", "red");
                        } else {
                            $("#likeBtn").css("color", "");
                        }
                    })
                }

                if (user) {
                    getZanColor();
                }
                $("#likeBtn").click(function () {
                    if (!user) {
                        login();
                    }
                    $.post('/Zans/saveOrDelete', {type: 4, typeId: params.id}, function (data) {
                        getZenNum();
                        if (user) {
                            getZanColor();
                        }
                    })
                })
            })
            //声明一个变量,用于当前页的增加
            var currentPage = 1;
            //总页数
            var pages;
            //存储游记的数组
            var travelArr = [];

            //定义一个函数,函数里发请求,使得变量的值金有限于该次访问
            function query() {
                $.get("/CommentStrategies/" + params.id, {currentPage: currentPage}, function (data) {

                    $.merge(travelArr, data.list);
                    var json = {list: travelArr};
                    $('#display').renderValues(json, {
                        getcommenttId: function (item, value) {
                            $(item).attr("data-id", value);
                        }, getZanStyle: function (item, value) {
                            if (value == 1) {
                                $(item).css("color", "red");
                            } else {
                                $(item).css("color", "");
                            }
                        }
                    });

                    //获取总页数
                    pages = data.pages;
                    //点赞事件
                    $(".zan").click(function () {
                        var currentItem = $(this);
                        if (!user) {
                            login();
                        } else {
                            var commentId = $(this).closest(".content").find(".listComment").data("id")
                            $.post('/Zans/saveOrDelete', {type: 4, typeId: commentId}, function (data) {
                                $.get("/Zans/count", {type: 4, typeId: commentId}, function (data) {
                                    //$('.zanCount').html(data);
                                    currentItem.html('<span class="zanCount">' + data + '</span>')
                                })
                                if (user) {
                                    $.get('/Zans/zan', {type: 4, typeId: commentId, userId: user.id}, function (data) {
                                        if (data.success) {
                                            currentItem.css("color", "red");
                                        } else {
                                            currentItem.css("color", "");
                                        }
                                    })
                                }
                            })
                        }
                    })
                    //评论
                    $('.commentBtn').click(function () {
                        if (!user) {
                            login();
                        } else {
                            $('#commentId').val(params.id)
                            $('#exampleModal1').modal("show")
                        }
                    })

                    //提交评论模态框
                    $("#commentBttn").click(function () {
                        $("#editForm").ajaxSubmit(function (data) {
                            successAlert(data);
                        })
                    })
                });
                //当前页加1
                currentPage = currentPage + 1;
            }

            //执行函数
            query();
            //滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">已经到底了</span>',
                            autoClose: 500
                        })
                    }
                }
            })

        })

    </script>
    <style type="text/css">
        #display {
            margin-bottom: 100px;
            overflow: auto;
        }

        .postinput {
            height: 4rem;
            padding: .5rem;
            background-color: #fff;
            border-top: .1rem #ededed solid;
            width: 400%;
            position: fixed;
            bottom: 0rem;
            font-size: 1.4rem;
        }

    </style>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">


    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a href="userProfiles.html?id=" render-key="user.id" render-fun="getUserId">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <span class="comment-star" render-fun="getStar" render-key="starNum">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                </span>

                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="imgArr">
                    <if render-src="imgArr.self" ??>
                        <li>
                            <img render-src="imgArr.self">
                        </li>
                    </if>
                </ul>

                <div class="comment-link">
                    <a data-href="/strategyCatalogs.html?id=" render-key="strategy.id" render-fun="getStrategyId">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div class="count d-flex justify-content-between">
        <div class="p-2"><span render-html=""></span></div>
        <div class="p-2">赞<span render-html="countZan">0</span></div>
    </div>
</div>
<div id="display">
    <div render-loop="list">
        <div class="commentBox">
            <div class="li">
                <div class="icon" style="width: 50px">
                    <a data-href="/userProfiles.html?id=">
                        <img render-src="list.commentUser.headImgUrl">
                    </a>
                </div>
                <!--当前评论的id-->
                <div class="content">
                    <!--当前评论的id-->
                    <input type="hidden" render-key="list.id" render-fun="getcommenttId" class="listComment">
                    <div class="name" render-html="list.commentUser.nickName" id="listCommentUserName"></div>
                    <div class="time" render-html="list.commentTime"></div>
                    <div class="text" id="replyContent" render-html="list.content"></div>

                    <div class="d-flex icon" id="rightId">
                        <input id="getCommentId" type="hidden" value="list.id">
                        <i class="fa  fa-commenting-o reply_Bth" style="margin-right: 5px"
                           render-key="list.commentUser.id" render-fun="getToUserId"> </i>
                        <i class="fa fa-thumbs-o-up zan" render-key="list.status"
                           render-fun="getZanStyle"> <span render-html="list.countZan" class="zanCount"></span> </i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2"><i class="fa fa-commenting-o commentBtn" ></i> 添加你的评论</div>
        <div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
    </div>
</div>
<!--评论模态框-->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel1">评论框</h4>
            </div>
            <div class="modal-body">
                <form action="/CommentStrategies" method="post" id="editForm">
                    <div class="form-group">
                        <input type="text" name="content" placeholder="说些什么" style="width: 100%;height:63px" ;>
                        <input type="hidden" name="comment.id" id="commentId">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="commentBttn">评论</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>